<template>
	<view class="address_main">
		<view class="void_show" v-if="serviceList?.length==0">
			<uni-icons type="location-filled" color="#eee" size="100"></uni-icons>
			<p class="tip">暂无服务区域,请先添加...</p>
		</view>
		<view class="sele_ul" v-else>
			<view class="sele_ul_item">
				<view class="sele_li" v-for="(item,index) in serviceList" :key="index">
					<view class="add_ed">
						<view class="">
							{{[item.province,item.city,item.area].join('-') }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="active_Btn">
			<view class="btn_logout">
				<button type="primary" size="small" class="onlogout" @click='onaddAdress'>
					添加服务区域
				</button>
			</view>
		</view>
		<view class="tree-picker" v-if="showArr">
			<ba-tree-picker ref="treePicker" :multiple='true' @select-change="selectChange" title="选择城市"
				:localdata="listData" valueKey="code" textKey="name" childrenKey="children"
				:selectedData="localDataList" @cancel="showArr=false" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		watch,
		nextTick
	} from "vue";
	import apiNetwork from '@/util/network_api/network.js';
	import apiAddress from '@/util/network_api/address.js';
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	const serviceList = ref([])
	const listData = ref([])
	const treePicker = ref()
	const addressListStr = ref('')
	const localDataList = ref([])
	// 新增地址
	const onaddAdress = () => {
		// uni.navigateTo({
		// 	url: "/pages/pages_network/user/edit_service_area"
		// })
		showPicker()
	}
	// 编辑地址
	const editItem = (item) => {
		uni.navigateTo({
			url: '/pages/pages_network/user/edit_service_area?item=' + JSON.stringify(item)
		})
	}

	const getNetworkArea = async () => {
		uni.showLoading({
			title: '加载中...',
		})
		await apiNetwork.getNetworkArea().then(res => {
			if (res.code == 20000) {
				serviceList.value = res.data.rows
				localDataList.value = [...getAddressStringByCode(serviceList.value)]
			} else {
				uni.hideLoading()
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}

		})
		uni.hideLoading()
	}
	onMounted(() => {

		apiAddress.address().then(res => {
			if (res.code == 20000) {
				listData.value = res.data.rows
			}
			getNetworkArea()
		})
	})

	// 显示服务地区
	const showArr = ref(false)
	const showPicker = () => {
		showArr.value = true
		nextTick(() => {
			localDataList.value = [...getAddressStringByCode(serviceList.value)]
			treePicker.value._show()
		})

	}
	// 服务区域
	const selectChange = async (res) => {
		let serviceAreas = getAddressCodeByString(res);
		uni.showLoading({
			title: '加载中...',
		})
		await apiNetwork.saveNetworkArea(serviceAreas).then(res => {
			if (res.code == 20000) {
				serviceList.value = res.data.rows
				getNetworkArea()
			} else {
				uni.hideLoading()
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}

		})
		uni.hideLoading()
	}
	// 根据编码数组获取对应地址
	function getAddressCodeByString(codes) {
		let result = [];
		let currentLevel = listData.value;
		for (let code of codes) {
			let str = {}
			currentLevel.find(item => {
				if (item.code == code) {
					str['province'] = item.name
					str['city'] = ''
					str['area'] = ''
					str['town'] = ''
				} else {
					item.children.find(item2 => {
						if (item2.code == code) {
							str['province'] = item.name
							str['city'] = item2.name
							str['area'] = ''
							str['town'] = ''
						} else {
							item2.children.find(item3 => {
								if (item3.code == code) {
									str['province'] = item.name
									str['city'] = item2.name
									str['area'] = item3.name
									str['town'] = ''
								} else {
									item3.children.find(item4 => {
										if (item4.code == code) {
											str['province'] = item.name
											str['city'] = item2.name
											str['area'] = item3.name
											str['town'] = item4.name
										}
									})
								}
							})
						}
					})
				}
			});
			result.push(str)
		}
		return result;
	}
	// 根据地址数组获取对应地址编码
	function getAddressStringByCode(arrs = []) {
		let result = [];
		let currentLevel = listData.value;
		for (let code of arrs) {
			currentLevel.find(item => {
				if (item.name == code.province) {
					if (code.city) {
						item.children.find(item2 => {
							if (item2.name == code.city) {
								if (code.area) {
									item2.children.find(item3 => {
										if (item3.name == code.area) {
											if (code.town) {
												item3.children.find(item4 => {
													if (item4.name == code.town) {
														result.push(item4.code)
													}
												})
											} else {
												result.push(item3.code)
											}
										}
									})
								} else {
									result.push(item2.code)
								}
							}
						})
					} else {
						result.push(item.code)
					}
				}
			});
		}
		return result;
	}
</script>

<style lang="scss" scoped>
	:deep(.tree-picker) {
		.uni-flex-item {
			display: flex;
			align-items: center;
			width: 100%;
			font-size: 28rpx;
		}
	}

	.address_main {
		background-color: #f6f7fa;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		overflow-y: auto;

		.void_show {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin-top: 40rpx;

			.tip {
				color: #ccc;
				font-size: 24rpx;
			}
		}

		.sele_ul {
			width: 100%;
			background-color: #f6f7fa;
			padding-bottom: 200rpx;

			.sele_ul_item {
				background-color: #f6f7fa;
				padding: 24rpx;

				.sele_li {
					background-color: #fff;
					margin-bottom: 20rpx;
					border-radius: 6rpx;
					padding: 24rpx;
					font-size: 28rpx;
					box-shadow: 0 0 10rpx 2rpx #eee;

					.add_ed {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 8rpx;
					}

					.text {
						color: #000;
						width: 90%;
						white-space: pre-wrap;
					}
				}
			}

		}

		.active_Btn {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			padding: 30rpx 0;
			width: 100%;

			.btn_logout {
				margin: 0 auto;

				:deep(button:after) {
					border: none !important;
				}

				.onlogout {
					font-size: 28rpx;
					font-weight: bold;
					padding: 0rpx 20rpx;
					margin: 0 36rpx;
					height: 80rpx;
					border-radius: 50rpx;
					line-height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #007cff;
				}
			}
		}

	}
</style>